<template>
  <el-row class="warp">
    <el-col class="publicNav" :span="3" style="height:100%">
           <router-link class="newnava" to="/layout/interfacea">设备管理</router-link>
           <router-link to="/layout/interfacea">接口管理</router-link>
    </el-col>
    <el-col :span="21" style="height:100%">
          <div class="main-contents-box">
                <div class="main-contents-main">
                  <div class="devicewarp">
                      <div class="newadd">
                          <el-button icon="el-icon-circle-plus-outline" type="primary" size='mini' @click="deviceAdd" v-if="userShow">新增设备</el-button>
                      </div>
                      <div class="devicecont"  >
                          <el-table
                              :data="this.$store.state.tableData"
                              size="mini"
                              border
                              max-height="500"
                              empty-text="暂无设备信息"
                              show-overflow-tooltip
                              style="width: 100%;text-align: center">
                              <el-table-column
                                fixed
                                show-overflow-tooltip
                                prop="sensorid"
                                label="设备类型"
                                width="150" header-align="center">
                              <div v-for="item in this.$store.state.tableData" style="display:none">
                                {{item.pluginid}}
                                }
                              </div>
                              </el-table-column>
                              <el-table-column
                                prop="deviceid"
                                label="设备ID"
                                show-overflow-tooltip
                                width="80" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="intertype"
                                label="物理接口"
                                width="80" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="interid"
                                label="接口ID"
                                show-overflow-tooltip
                                width="60" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="address"
                                label="接口地址"
                                show-overflow-tooltip
                                width="100" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="supplier"
                                label="设备厂家"
                                show-overflow-tooltip
                                width="120" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="model"
                                label="产品型号"
                                show-overflow-tooltip
                                width="120" header-align="center">
                              </el-table-column>
                              <el-table-column
                                prop="name"
                                label="设备名称"
                                show-overflow-tooltip
                                width="" header-align="center">
                              </el-table-column>
                              <el-table-column
                                fixed="right"
                                label="操作"
                                show-overflow-tooltip
                                width="100" header-align="center" v-if="userShow">
                                <template slot-scope="scope">
                                  <el-button @click="handleDelete(scope.$index, scope.row)"  type="text" size="small">删除</el-button>
                                  <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                </template>
                              </el-table-column>
                            </el-table>
                      </div>
                  </div>

                    <popup v-if="popshow" :popup-data='popupdata' :disableda="disableda" :popup-title="popuptitle" :is-show="isShowRegDialog" @on-close="closeDialog" @ssafe="addnew" :popu-safe='popuSafe' :popup-index="popupIndex">
                    </popup>
              </div>
          </div>
    </el-col>
  </el-row>
</template>
<script>
import {get_chart_sensorlist,get_attr1,get_interType,get_pluginInfo,hex10to16,hex16to10} from '../js/public.js';
import popup from  "./Monitornr/tem/popup.vue"
export default {
  components:{
      popup
  },
  data () {
    return {
      popshow:false,
        value: '',
        isShowRegDialog:false,
        popuptitle:'',//弹窗名称呢个
        popupdata:'',
        popupIndex:'',
        popuSafe:true,
        disableda:false,
        tableData:[],
        userShow:true
    }
  },
  methods: {
      //点击编辑按钮触发的事情
      handleEdit(index, row) {
        //console.log(row);//打印所选中行的信息
        this.$data.popuptitle="编辑设备";
        this.$data.isShowRegDialog=true;
        this.$data.popupdata=row;
        this.$data.popupIndex=index;
        this.$data.popshow=true;
        this.$data.disableda=true;
        this.$data.popuSafe=false; 
      },
      //点击删除按钮触发的事情
      handleDelete(index, row) {
        this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit('devLoading',true);
          // this.$data.tableData.splice(index,1)
          let delState=new Array();
          delState={
            "index":index,
            "deviceid":row.deviceid
          }
          this.$store.dispatch('inremove',delState);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            position:'bottom-right'
          });
        });
      },
      //点击新增设备触发的事件
      deviceAdd(){
        this.$data.isShowRegDialog=true;
        this.$data.popuptitle="新增设备";
        this.$data.popshow=true;
        this.$data.popupdata='';
        this.$data.popuSafe=true;
      },
      //点击子组件传值关闭按钮
      closeDialog(){
        this.$data.isShowRegDialog=false;
        this.$data.popshow=false;
        this.$data.disableda=false;
      },
      //点击保存后发生的请求同步事件
      addnew(){
          //loading加载打开
          this.$store.commit('devLoading',true);
          this.$data.isShowRegDialog=false;
          this.$data.popshow=false;
          this.$data.disableda=false;
      },
      user(){
        /*if(window.sessionStorage.getItem('username') != "ls" && window.sessionStorage.getItem('username') != "zyl"){
            //暂时屏蔽权限问题
            this.$data.userShow=false;
         }*/
      },
        get_pwd(){
          let  pwd; 
          $.ajax({
              url:'../cfg/password.json',
              type:'GET',
              cache:false,
              async: false,
              dataType:'text',
              success:function(result){
                  let data = eval("("+result+")");
                  pwd = data.password;
              },
              error:function(realdata){                           
              }
          })
          return pwd;
      },
      check_pwd(){
          let username = window.sessionStorage.getItem('username');
          let password = window.sessionStorage.getItem('password');
          let pwd = this.get_pwd();
          if(username == "admin"){
              if(password != pwd){
                  this.$message({
                      message: '密码做了更改,请重新登录!',
                      type: 'info',
                      center:true,
                      showClose: true
                  });
                  this.loginout();
              }
          } 
      },
      loginout(){
          window.sessionStorage.removeItem("username");
          window.sessionStorage.removeItem("password");
          
          this.set_log("用户退出");
          this.$router.push("/login");
      },
      set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      }
    },
    mounted(){
        this.check_pwd(); 
        let that=this;
        let msg = {"cmd":"CGI_DEVICE_GET_LIST"};
        this.user();

        if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("./static/get_device_list.json").then(function(res){
              let result = new Array();
              $.each(res.data,function(i,value){
                let plugInfo_arr = new Array();
                plugInfo_arr = get_pluginInfo(value["pluginid"]);
                console.info(plugInfo_arr);
                if (plugInfo_arr != undefined) {
                  value["sensorid"] = get_chart_sensorlist(value["sensorid"]);
                  value["supplier"] = plugInfo_arr[0]["supplier"];
                  value["model"] = plugInfo_arr[0]["model"];
                  value["intertype"] = get_interType(value["intertype"]);
                  result.push(value);
                }
              });
              that.$store.commit('tableDatanew',result);
            });
        }else{
            this.$ajax.post("../cgi-bin/main.cgi",msg).then(function(res){
                let result = new Array();
                $.each(res.data,function(i,value){
                	let plugInfo_arr = new Array();
                	plugInfo_arr = get_pluginInfo(value["pluginid"]);
                	console.info(plugInfo_arr);
                	if (plugInfo_arr != undefined) {
                		value["sensorid"] = get_chart_sensorlist(value["sensorid"]);
                		value["supplier"] = plugInfo_arr[0]["supplier"];
                		value["model"] = plugInfo_arr[0]["model"];
                		value["intertype"] = get_interType(value["intertype"]);
                		result.push(value);
                	}
                });
                that.$store.commit('tableDatanew',result);
            });
        }
    }
}
</script>
<style scoped>
.devicewarp{
  width:75.5%;
  min-width: 500px;
  max-height: 600px;
  min-height: 300px;
  margin: auto;
  height: auto;
  padding-top: 50px;
}
.newadd{
   width:100%;
   height: 50px;
   margin: auto;
   margin-bottom: 10px;
}
.newadd .el-button{
  float: right;
  
}
.el-table{
  z-index: 0;
}
.devicecont{
  width: 100%;
  min-height: 300px;
  height: auto;
}
 .el-table .abc .cell.el-tooltip{
    display: none;
}
</style>
